<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<mIn-put class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></mIn-put>
			</view>
			<view class="input-row">
				<text class="title">密码：</text>
				<m-inPut type="password" displayable v-model="password" placeholder="请输入密码"></m-inPut>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
			<!-- <button type="primary" class="primary" @tap="chooseImage">chooseImage</button> -->
			<!-- 	<button type="primary" class="primary" @tap="scanCode">scanCode</button>
			<button type="primary" class="primary" @tap="scanCode1">scanCode</button>
			<button type="primary" class="primary" @tap="scanCode2">scanCode</button> -->
			<!-- <button type="primary" class="primary" @tap="openDB">openDB</button>
			<button type="primary" class="primary" @tap="closeDatabase">closeDatabase</button>
			<button type="primary" class="primary" @tap="executeSQL">executeSQL</button>
			<button type="primary" class="primary" @tap="selectSQL">selectSQL</button> -->
		</view>
		<view class="action-row">
			<navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view>
		<view class="oauth-row" v-if="hasProvider" v-bind:style="{ top: positionTop + 'px' }">
			<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
				<image :src="provider.image" @tap="oauth(provider.value)"></image>
				<!-- #ifdef MP-WEIXIN -->
				<button v-if="!isDevtools" open-type="getUserInfo" @getuserinfo="getUserInfo"></button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import mInPut from '../../components/m-input.vue';

export default {
	components: {
		mInPut
	},
	data() {
		return {
			providerList: [],
			hasProvider: false,
			account: '',
			password: '',
			positionTop: 0,
			isDevtools: false,
			redirectUrl: ''
		};
	},
	onLoad(e) {
		this.redirectUrl = e.redirectUrl;
		console.log('login', e);
	},
	methods: {
		chooseImage() {
			let seft = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log('res chooseImages', res);
					for (let i = 0; i < res.tempFiles.length; i++) {
						let temp = res.tempFiles[i];
						console.log(temp);
						uni.uploadFile({
							url: 'http://dev.dev.lv-yan.com:9001/api/core/UploadFile',
							file: temp,
							formData: {
								ProcessID: 'test2',
								FileName: 'test',
								FileType: 'test',
								DataType: 'mobile',
								TenantID: '9'
							},
							success: uploadFileRes => {
								console.log(uploadFileRes.data);
							}
						});
					}
				}
			});
		},
		bindLogin() {
			let seft = this;
			this.GET('logon/GetCM_Employeest', {
				UserAgent: 'app',
				UserId: this.account,
				Password: this.password,
				TenantID: 9
			}).then(res => {
				if (res.data.UserId) {
					this.setChangeData(res.data);
					
					if (!this.redirectUrl) {
						uni.switchTab({
							url: '../home/index'
						});
					} else {
						if (this.IsTabBar(this.redirectUrl)) {
							uni.switchTab({
								url: this.redirectUrl
							});
						} else {
							console.log(this.redirectUrl)
							uni.reLaunch({
							    url: this.redirectUrl
							});
						}
					}
				}
			});
		}
	},
	onReady() {
		// #ifdef MP-WEIXIN
		this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
		// #endif
	}
};
</script>

<style>
.action-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.action-row navigator {
	color: #007aff;
	padding: 0 10px;
}

.oauth-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.oauth-image {
	position: relative;
	width: 50px;
	height: 50px;
	border: 1px solid #dddddd;
	border-radius: 50px;
	margin: 0 20px;
	background-color: #ffffff;
}

.oauth-image image {
	width: 30px;
	height: 30px;
	margin: 10px;
}

.oauth-image button {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
</style>
